<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>添加角色</title>
<link rel="stylesheet" type="text/css"	href="${ctx}/resources/media/css/select2_metro.css" />

    <%@include file="../../include/treeview.jsp"%>
    <%@include file="../../include/validate.jsp"%>
</head>
<body>
	<div class="row-fluid profile">
		<div class="span12">
			<!--BEGIN TABS-->
			<div class="tabbable tabbable-custom tabbable-full-width">
				<ul class="nav nav-tabs">
					<li><a href="${ctx}/role/list">角色列表</a></li>
					<li class="active"><a href="#">添加角色</a></li>
				</ul>
				<div class="tab-content">
					<!--end tab-pane-->
					<div class="tab-pane profile-classic row-fluid active" id="tab_1_2">
						<div class="span12">
							<!-- BEGIN SAMPLE FORM PORTLET-->
							<div class="portlet box blue">
								<div class="portlet-title">
									<div class="caption">
										<i class="icon-reorder"></i> <span class="hidden-480">添加角色</span>
									</div>
								</div>
								<!-- END SAMPLE FORM PORTLET-->
								<div class="portlet-body form">
									<form class="form-horizontal" action="${ctx }/role/save" id="form" method="post">
										<fieldset>
											<input id="roleId" type="hidden" name="id" value="${role.id }">
                                            <input id="version" type="hidden" name="version" value="${role.version }">
                                            <input id="menuIds" type="hidden" name="menuIds">
											<div class="control-group">

												<!-- Text input-->
												<label class="control-label" for="input01">名称</label>
												<div class="controls">
													<input type="text" placeholder="角色名称" value="${role.name }" name="name" class="m-wrap input-xlarge">
													<p class="help-block"></p>
												</div>
											</div>

											<div class="control-group">

												<!-- Text input-->
												<label class="control-label" for="input01">代码</label>
												<div class="controls">
													<input type="text" placeholder="角色代码" name="code" value="${role.code }" class="m-wrap input-xlarge">
													<p class="help-block"></p>
												</div>
											</div>



											<div class="control-group">

												<!-- Text input-->
												<label class="control-label" for="input01">排序</label>
												<div class="controls">
													<input type="text" placeholder="排序值" value="${role.sort}" name="sort" class="m-wrap input-xlarge">
													<p class="help-block">越小排序越靠前</p>
												</div>
											</div>
											
											<div class="control-group">

												<!-- Text input-->
												<label class="control-label" for="input01">所属平台</label>
												<div class="controls">
													<select id="platform" name="platform" class="select" style="width:285px">
																<c:if test="${role.platform==1}">
																<option value="1" selected>后端</option>
																<option value="2">前端</option>
                                                               	<option value="3">商户端</option>
																</c:if>
                                                               	<c:if test="${role.platform==2}">
																<option value="1">后端</option>
																<option value="2" selected>前端</option>
                                                               	<option value="3">商户端</option>
																</c:if>
																<c:if test="${role.platform==3}">
																<option value="1">后端</option>
																<option value="2">前端</option>
                                                               	<option value="3" selected>商户端</option>
																</c:if>
                                                               	<c:if test="${role.platform==null}">
																<option value="1">后端</option>
																<option value="2">前端</option>
                                                               	<option value="3">商户端</option>
																</c:if>
                                                            </select>
												</div>
											</div>
											
                                            <div class="control-group">
                                                <label class="control-label">状态</label>
                                                <div class="controls">
                                                    <!-- Inline Radios -->
                                                    <label class="radio inline"> <input type="radio"
                                                                                        value="0" name="status" checked="checked"> 正常
                                                    </label> <label class="radio inline"> <input type="radio"
                                                                                                 value="1" name="status"> 禁用
                                                </label>
                                                </div>
                                            </div>

											<div class="control-group">

												<!-- Textarea -->
												<label class="control-label">角色描述</label>
												<div class="controls">
													<div class="textarea">
														<textarea name="description" class="m-wrap "
															style="margin: 0px; width: 269px; height: 37px;">${role.description}</textarea>
													</div>
												</div>
											</div>

                                            <div class="control-group">
                                                <label class="control-label">角色授权</label>
                                                <div class="controls">
                                                    <div id="menuTree" class="ztree"
                                                         style="margin-top: 3px; float: left;"></div>
                                                </div>
                                            </div>

										</fieldset>
										<div class="form-actions">
											<button type="submit" class="btn blue">
												<i class="icon-ok"></i> 保存
											</button>
											<button type="button" class="btn" onclick="history.go(-1)">取消</button>
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--END TABS-->
			</div>
		</div>
	</div>

<script type="text/javascript"	src="${ctx}/resources/media/js/select2.min.js"></script> 
    <script type="text/javascript">
        function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
            expandAll();
        }

        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            for (var i=0, l=childNodes.length; i<l; i++) {
                //默认选中
                var ids = "${role.menuIds}".split(",");
                for(var j=0; j<ids.length; j++) {
                    if(childNodes[i].id == ids[j]) {
                        childNodes[i].checked = "true";
                    }
                }
            }
            return childNodes;
        }

        function check() {
            if (curAsyncCount > 0) {
                return false;
            }
            return true;
        }

        var curStatus = "init", curAsyncCount = 0, asyncForAll = false, goAsync = false;
        function expandAll() {
            if (!check()) {
                return;
            }
            var zTree = $.fn.zTree.getZTreeObj("menuTree");
            if (asyncForAll) {
//                $("#demoMsg").text(demoMsg.expandAll);
                zTree.expandAll(true);
            } else {
                expandNodes(zTree.getNodes());
                if (!goAsync) {
//                    $("#demoMsg").text(demoMsg.expandAll);
                    curStatus = "";
                }
            }
        }
        function expandNodes(nodes) {
            if (!nodes) return;
            curStatus = "expand";
            var zTree = $.fn.zTree.getZTreeObj("menuTree");
            for (var i=0, l=nodes.length; i<l; i++) {
                zTree.expandNode(nodes[i], true, false, false);
                if (nodes[i].isParent && nodes[i].zAsync) {
                    expandNodes(nodes[i].children);
                } else {
                    goAsync = true;
                }
            }
        }

        $(function() {
        	$("select").select2();
            $("#form").validate({
                rules: {
                    //name: {remote: "${ctx}/sys/role/checkName?oldName=" + encodeURIComponent("${role.name}")}
                },
                messages: {
                    //name: {remote: "角色名已存在"}
                },
                submitHandler: function(form){
                    var ids = [], nodes = tree.getCheckedNodes(true);
                    for(var i=0; i<nodes.length; i++) {
                        ids.push(nodes[i].id);
                    }
                    $("#menuIds").val(ids);

                    //loading('正在提交，请稍等...');
                    form.submit();
                }
            });



            var setting = {
                check : {
                    enable : true,
                    nocheckInherit : true
                },
                view : {
                    selectedMulti : false
                },
                data : {
                    simpleData : {
                        enable : true
                    }
                },
                callback : {
                    beforeClick : function(id, node) {
                        tree.checkNode(node, !node.checked, true, true);
                        return false;
                    },
                    onAsyncSuccess: zTreeOnAsyncSuccess
                },
                async: {
                    enable: true,
                    url: "${ctx}/menu/findByParentId",
                    autoParam: ["id"],
                    otherParam: {"otherParam": "zTreeAsyncTest"},
                    dataFilter: filter
                }
            };

            //初始化树
            var tree = $.fn.zTree.init($("#menuTree"), setting);

            <%--//默认选中--%>
            <%--var ids = "${role.menuIds}".split(",");--%>
            <%--for(var i=0; i<ids.length; i++) {--%>
                <%--var node = tree.getNodeByParam("id", ids[i]);--%>
                <%--try{tree.checkNode(node, true, false);}catch(e){}--%>
            <%--}--%>

        });


    </script>
</body>
</html>